<template>
    <view>
        <c-empty emptyTitle='暂无订阅课程' v-if='showEmpty'></c-empty>
        <view v-for="(item, index) in dataList" :key="index" class="list-item" v-else @click="tapItem(item)">
            <view class="name">
                {{item.name}}
            </view>
            <view class="date-box">
                <view class="date">
                    {{item.createTimeString}}
                </view>
                <view class="date">
                    至
                </view>
                <view class="date">
                    {{item.expirationString}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        isEmpty
    } from '../../common/utils/util';
    import {
        getMyClassData
    } from "./services/index.js"
    import MyClassModel from './models/myClassModel';
    import {
        gotoUnitDetailPage
    } from '../../common/services/pageRoute';
    export default {
        data() {
            return {
                dataList: []
            };
        },
        onReady() {
            uni.startPullDownRefresh({

            })
        },
        onPullDownRefresh() {
            this.getListData();
        },
        computed: {
            showEmpty: function() {
                return isEmpty(this.dataList);
            }
        },
        methods: {
            tapItem(item) {
                return;
                gotoUnitDetailPage(item.id)
            },
            getListData() {
                getMyClassData().then(res => {
                    this.dataList = res.map(item => {
                        return new MyClassModel(item)
                    })
                }).finally(() => {
                    uni.stopPullDownRefresh()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .list-item {
        margin: 30rpx;
        padding: 20rpx;
        background: #fff;
        border-radius: 20rpx;
        box-shadow: 0 0 20rpx #88888844;

        display: flex;
        flex-direction: column;

        .name {
            font-size: 34rpx;
            font-weight: 700;
            color: #333;
        }

        .date-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #888;
            font-size: 22rpx;
            margin-top: 20rpx;

            .date {
                margin-right: 20rpx;
            }

            .date:last-child {
                margin-right: 0;
            }
        }

        .date-box::before {
            content: "可用时间： ";
        }
    }
</style>